<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后台 订单列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <!--导入js组件vue的类库-->
    <script type="application/javascript" src="../js/vue.min.js"></script>

    <!--<script type="text/javascript">

        function sendOrder(id) {
            location.href = "${pageContext.request.contextPath}/sendOrder?oid=" + id;
        }

        $(function () {
            $("#search").click(function () {
                var username = $("input[name='username']").val();
                var status = $("select[name='orderStatus'] option:selected").val();
                location.href = "${pageContext.request.contextPath}/searchOrder?username=" + username + "&status=" + status;
            })
        })
    </script>-->
</head>
<body>
<div class="row" style="width:98%;margin-left: 1%;margin-top: 5px;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                订单列表
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>用户姓名</span>
                            <input type="text" name="username" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
                        <div class="form-group form-inline">
                            <span>订单状态</span>
                            <select name="orderStatus" class="form-control">
                                <option value=" ">----------</option>
                                <option value="已预定">已预定</option>
                                <option value="已归还">已归还</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" id="search"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>

                <table id="tb_list" class="table table-striped table-hover table-bordered table-condensed">
                    <tr>

                        <td>订单编号</td>
                        <td>总金额</td>
                        <td>订单状态</td>
                        <td>车辆名称</td>
                        <td>用户姓名</td>
                        <td>操作</td>
                    </tr>

                    <tr v-for="or in order">

                        <td>{{or.id}}</td>
                        <td>{{or.oprice}}</td>
                        <td>{{or.status}}</td>
                        <td>{{or.cname}}</td>
                        <td>{{or.tel}}</td>
                        <td>
                            <button @click="del(or.id)">删除</button>
                        </td>
                    </tr>

                </table>

            </div>
        </div>
    </div>
</div>
<script>
    var orderInfo = new Vue({
        el: '#tb_list',  //将id为tb_list的html标签与vue对象绑定
        data: {
            order: [{'id': 2, 'money': 200, 'status': 1, 'time': '2020-12-23', 'username': '123456'},
                {'id': 3, 'money': 200, 'status': 2, 'time': '2020-12-23', 'username': '123456'},
                {'id': 4, 'money': 200, 'status': 3, 'time': '2020-12-23', 'username': '123456'}

            ]
        },
        methods: {//对象的行为
            del: function (id) {
                alert("del" + id);
                $.ajax({
                    url: 'delOrder?id=' + id,
                    type: "delete",
                    dataType: 'json',
                    success: function (res) {
                        if (res.statusCode == 200) {
                            alert(res.msg);
                            loadOrders();//重新加载数据
                        }
                    }

                });
            }
        }

    });
    $(function () {
        loadOrders();
    });

    function loadOrders() {
        $.ajax({
            url: 'getOrders',   //请求路径
            type: 'GET',  //请求方式
//			data:'',  //请求的数据
            dataType: 'json',  //响应的数据类型
            success: function (res) {

                orderInfo.order = res;
            }
        });
    }
</script>
</body>
</html>